<template>
  <div class="top">
    <div class="logo">
      <a href="" @click.prevent="toIndex()"
        ><img :src="require('@/assets/images/logo.png')"
      /></a>
    </div>
    <div class="search">
      <form>
        <input
          type="text"
          v-model="searchQuery"
          class="s_ipt"
          placeholder="请输入商品名称"
        />
        <input
          type="submit"
          value="搜索"
          class="s_btn"
          @click.prevent="searchProducts"
        />
      </form>
      <span class="fl">
        <a href="#" @click.prevent="quickSearch('沙发')">沙发</a>
        <a href="#" @click.prevent="quickSearch('华为')">华为</a>
        <a href="#" @click.prevent="quickSearch('哈基米')">哈基米</a>
        <a href="#" @click.prevent="quickSearch('蛋糕')">蛋糕</a>
        <a href="#" @click.prevent="quickSearch('遐蝶')">遐蝶</a>
      </span>
    </div>
    <!-- 购物车 -->
    <div class="cart-container">
      <div
        class="i_car"
        @mouseenter="showCart = true"
        @mouseleave="showCart = false"
        @click="toCarProduct"
      >
        <div class="car_t">购物车<span>[{{ cartItemCount }}]</span></div>
      </div>

      <!-- 购物车悬浮框 -->
      <div
        v-if="showCart"
        class="cart-popup"
        @mouseenter="showCart = true"
        @mouseleave="showCart = false"
      >
        <div v-if="cartItems && cartItems.length > 0">
          <div v-for="item in cartItems" :key="item.id" class="cart-item">
            <img
              :src="`http://117.72.153.227/image/${item.fileName}`"
              class="item-image"
            />
            <div class="item-info">
              <div class="item-name">{{ item.productName }}</div>
              <div class="item-price">
                ¥{{ item.price }} x {{ item.quantity }}
              </div>
            </div>
          </div>
          <div class="cart-total">总计: ¥{{ cartTotal }}</div>
        </div>
        <div v-else class="empty-cart">购物车是空的</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "HeaderSearch",
  data() {
    return {
      searchQuery: "",
      isLogin: false,
      showCart: false,
    };
  },
  computed: {
    ...mapGetters({
      cartItems: "getShoppingCart",
      cartTotal: "getCartTotal",
      cartItemCount: "getCartItemCount",
    }),
  },
  methods: {
    toIndex() {
      if (!(this.$route.path === "/")) {
        this.$router.push({ name: "index" });
      }
    },
    searchProducts() {
      const searchTerm = this.searchQuery ? this.searchQuery.trim() : "";
      console.log("查询参数:" + searchTerm);
      //跳转到搜索页面，传递productName参数
      this.$router.push({
        path: "/SearchProduct",
        query: {
          productName: searchTerm || undefined,
          pageNum: 1, // 重置为第一页
        },
      });
    },
    quickSearch(keyword) {
      this.searchQuery = keyword;
      this.searchProducts();
    },
    toCarProduct() {
      this.$router.push({ name: "BuyCar" });
    },
  },
};
</script>

<style scoped>
/* 搜索框样式 */
.s_ipt {
  width: 400px;
  height: 36px;
  padding: 0 10px;
  border: 2px solid #ff4e00;
  outline: none;
}

.s_btn {
  width: 80px;
  height: 40px;
  background: #ff4e00;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.s_btn:hover {
  background: #ff6e00;
}

.fl a {
  margin-right: 10px;
  color: #666;
  text-decoration: none;
}

.fl a:hover {
  color: #ff4e00;
}
.cart-container {
  margin-left: 150px;
  position: relative;
  display: inline-block;
}
.cart-popup {
  position: absolute;
  right: 0;
  top: 100%;
  width: 300px;
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 15px;
  z-index: 900;
}

.cart-item {
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

.item-image {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

.item-info {
  flex: 1;
}

.item-name {
  font-size: 14px;
  margin-bottom: 5px;
}

.item-price {
  font-size: 12px;
  color: #888;
}

.cart-total {
  font-weight: bold;
  text-align: right;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

.empty-cart {
  text-align: center;
  padding: 20px;
  color: #999;
}
</style>